<template>
  <div class="index">
    <canvas
      id="canvas"
      canvas-id="canvas"
      style="width: 300px; height: 300px"
    ></canvas>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import DrawPoster from 'uni-draw-poster';
export default Vue.extend({
  onReady() {
    // 获取绘制工具
    const ctx = uni.createCanvasContext('canvas');
    // 进行绘制
    ctx.save();
    ctx.fillStyle = '#F4F4F4';
    ctx.fillRect(0, 0, 300, 300);
    ctx.restore();
    ctx.draw();

    // 下载图片地址
    uni.downloadFile({
      url: 'static/logo.png',
      success(res) {
        // 进行绘制图片
        ctx.save();
        ctx.drawImage(res.tempFilePath, 0, 0, 150, 150);
        ctx.restore();
        ctx.draw(true, () => {
          // 创建路径
          uni.canvasToTempFilePath({
            width: 300,
            height: 300,
            destWidth: 300,
            destHeight: 300,
            canvasId: 'canvas',
            success: (res) => {
              console.log(res.tempFilePath);
            },
          });
        });
      },
    });
  },
});
</script>

<style lang="scss">
page,
.index {
  height: 100%;
}
.index {
  position: relative;
  background: rgba($color: grey, $alpha: 0.2);
}
canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
